<!--
 * @Description: excel在线编辑及打印导入导出功能
 * @Author: flyer
 * @Date: 2022-01-11 14:27:39
 * @LastEditTime: 2022-03-30 11:27:18
 * @LastEditors: flyer
-->
<template>
	<div class="lucky-excel">
		<div class="tool-bar">
			<el-button v-if="showDownload" type="primary" class="tool" plain @click="downloadJSON">导出json</el-button>
			<!-- <el-button v-if="showDownload" type="primary" class="tool" plain @click="download">下载</el-button>
      <el-button v-if="showExport" type="primary" class="tool" plain @click="exportFile">导出</el-button>
      <el-upload
        v-if="showImport"
        ref="upload"
        name="file"
        action=""
        :limit="1"
        :before-upload="beforeUpload"
        :show-file-list="false"
      >
        <el-button slot="trigger" type="primary" class="tool" plain>导入excel</el-button>
      </el-upload>
      <el-button v-if="showPrintDefault" v-print="`#${printParam.id}`" type="primary" class="tool" plain @click="printFn(false)">打印</el-button>
      <el-button v-if="showPrint" v-print="`#${printParam.id}`" type="primary" class="tool" plain @click="printFn(true)">打印选中区域</el-button> -->
		</div>
		<div :id="luckysheetParam.containerId" class="container" />
		<div :id="printParam.id" :style="{ textAlign: printPosition }" />
	</div>
</template>

<script>
import LuckyExcel from "luckyexcel";
import exportExcel from "@/exportExcel.js";
import { summaryTemplate } from "./summary-template";
const templateData = summaryTemplate
// import { marketTemplate } from "./market-template";
// const templateData = marketTemplate

export default {
	name: "EditExcel",
	props: {
		// 显示的excel文件
		file: {
			default: () => {
				return null;
			},
			type: Object,
		},
		// 打印时base64图片的位置
		printPosition: {
			default: "center",
			type: String,
		},
		showDownload: {
			type: Boolean,
			default: true,
		},
		showExport: {
			type: Boolean,
			default: true,
		},
		showImport: {
			type: Boolean,
			default: true,
		},
		showPrintDefault: {
			type: Boolean,
			default: true,
		},
		showPrint: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			// excel基础配置
			luckysheetParam: {
				// 对应区域
				containerId: "editSheet",
				// 语言
				lang: "zh",
			},
			// 打印基础配置
			printParam: {
				// 对应区域
				id: "print_html",
			},
		};
	},
	mounted() {
		if (this.file) {
			this.beforeUpload(this.file);
			return;
		}
		// eslint-disable-next-line no-debugger
		this.initExcel({
			sheets: [templateData],
		});
	},
	methods: {
		/**
		 * @description: 初始化excel
		 * @author: flyer
		 * @param {Object} exportJson 初始化数据
		 */
		initExcel(exportJson = {}) {
			// eslint-disable-next-line no-undef
			luckysheet.create({
				container: this.luckysheetParam.containerId, // luckysheet为容器id
				lang: this.luckysheetParam.lang,
				showtoolbar: true,
				showtoolbarConfig: {
					print: false, // 隐藏插件内部打印按钮
				},
				showinfobar: false, // 显示头部返回标题栏
				data: exportJson.sheets,
			});
		},
		downloadJSON( ) {
      const data = window.luckysheet.getAllSheets()[0]
			const jsonData = JSON.stringify(data);
			const blob = new Blob([jsonData], { type: "application/json" });
			const url = URL.createObjectURL(blob);

			const a = document.createElement("a");
			a.href = url;
			a.download = '市场模板.json';
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
			URL.revokeObjectURL(url);
		},

		/**
		 * @description: 打印默认区域
		 * @author: flyer
		 * @param {Boolean} flag 是否默认打印
		 */
		printFn(flag) {
			// eslint-disable-next-line no-undef
			const src = flag ? luckysheet.getScreenshot() : luckysheet.getScreenshot({ range: "A1:J50" });
			const $img = `<img src=${src} style="max-width: 90%;" />`;
			this.$nextTick(() => {
				document.querySelector(`#${this.printParam.id}`).innerHTML = $img;
			});
		},

		/**
		 * @description: 获取在线excel数据后编辑成excel文件导出
		 * @author: flyer
		 */
		async exportExcel() {
			// eslint-disable-next-line no-undef
			const data = luckysheet.getluckysheetfile();
			const exportData = await exportExcel(data);
			const blob = new Blob([exportData]);
			const file = new File([blob], this.file?.name || "文档.xlsx", { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
			return file;
		},

		/**
		 * @description: 导出excel文件对象
		 * @author: flyer
		 */
		async exportFile() {
			const file = await this.exportExcel();
			// this.$emit('exportFile', file)
			this.beforeUpload(file);
		},

		/**
		 * @description: 浏览器导出excel
		 * @author: flyer
		 * @param {Object} blob excel数据，也可以是file对象
		 */
		async download() {
			const file = await this.exportExcel();
			if (window.navigator && window.navigator.msSaveBlob) {
				window.navigator.msSaveBlob(file, file.name);
			} else {
				const a = document.createElement("a");
				a.download = file.name;
				a.href = URL.createObjectURL(file);
				a.style.display = "none";
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
			}
		},

		/**
		 * @description: 导入excel文件
		 * @author: flyer
		 * @param {Object} file excel文件
		 */
		beforeUpload(file) {
			const suffix = file.name.split(".");
			if (suffix[suffix.length - 1] !== "xlsx") {
				this.$message.error("文件格式只能是.xlsx");
				return false;
			}
			// eslint-disable-next-line no-undef
			luckysheet.destroy();
			// eslint-disable-next-line no-undef
			LuckyExcel.transformExcelToLucky(file, (exportJson) => {
				if (exportJson.sheets == null || exportJson.sheets.length === 0) {
					this.$message.warning("读取excel文件内容失败，目前不支持xls文件!");
					return;
				}
				this.initExcel(exportJson);
			});
		},
	},
};
</script>

<style lang="scss" scoped>
$height: 40px;
.lucky-excel {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	.container {
		width: 100%;
		height: calc(100% - #{$height});
	}
	.tool-bar {
		display: flex;
		width: 100%;
		height: $height;
		justify-content: left;
		align-items: center;
		::v-deep .el-button {
			padding: 0 10px;
			height: 30px;
			line-height: 30px;
		}
		.tool {
			margin-left: 10px;
		}
	}
}
</style>
